<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Header",
  props: {
    person: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    }
  }
})
</script>

<template>
<div class="header">
  我是头部组件
 <p>{{ person}}</p>
  <button @click="$emit('clickHandle','Header组件传递过来的数据接收到了')">向动态组件传递数据</button>
</div>
</template>

<style scoped lang="less">
.header{
  width: 100%;
  height: 100px;
  background-color: cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
